<!-- 审批详情的右侧：审批流 -->
<template>
 <div class="processBox">
   <div class="horizontal-timeline">
  <el-steps class="pt-[20px] pb-[20px]">
    <!-- 遍历每个审批节点 -->
    <el-step
      v-for="(activity, index) in activityNodes"
      :key="index"
      size="large"
     :status="getsetpstatus(activity.status)"
    >
      <template #icon>
        <div
          class="absolute left--[10px] top--[6px] rounded-full border border-solid border-[#dedede] w-[30px] h-[30px] flex justify-center items-center bg-[#3f73f7] p-[5px]"
        >
          <img class="w-full h-full" :src="getApprovalNodeImg(activity.nodeType)" alt="" />
          <div

            class="absolute top-[17px] left-[17px] rounded-full flex items-center p-[1px] border-2 border-white border-solid"
            :style="{ backgroundColor: getApprovalNodeColor(activity.status) }"
          >
            <el-icon :size="11" color="#fff">
              <component :is="getApprovalNodeIcon(activity.status, activity.nodeType)" />
            </el-icon>
          </div>
        </div>
      </template>
      <template #title>

      <div class="flex flex-col items-start gap2" :id="`activity-task-${activity.id}-${index}`">
        <!-- 第一行：节点名称、时间 -->
        <div class="flex w-full">
          <div class="font-bold"> {{ activity.name }}</div>
          <!-- 信息：时间 -->
          <div
            v-if="activity.status !== TaskStatusEnum.NOT_START"
            class="text-[#a5a5a5] text-[12px] mt-1"
          >
            {{ getApprovalNodeTime(activity) }}
          </div>
        </div>
        <!-- 需要自定义选择审批人 -->
       
      </div>
      </template>
      <template #description>
       <div
          class="flex flex-wrap gap2 items-center"
          v-if="
            isEmpty(activity.tasks) &&
            isEmpty(activity.candidateUsers) &&
            CandidateStrategy.START_USER_SELECT === activity.candidateStrategy
          "
        >
          <!--  && activity.nodeType === NodeType.USER_TASK_NODE -->

   
          <div
            v-for="(user, idx1) in customApproveUsers[activity.id]"
            :key="idx1"
            class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
          >
            <el-avatar class="!m-5px" :size="28" v-if="user.avatar" :src="user.avatar" />
            <el-avatar class="!m-5px" :size="28" v-else>
              {{ user.nickName.substring(0, 1) }}
            </el-avatar>
            {{ user.nickName }}
          </div>
        </div>
        <div v-else class="flex items-center flex-wrap mt-1 gap2">
          <!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
          <div v-for="(task, idx) in activity.tasks" :key="idx" class="flex flex-col pr-2 gap2">
            <div
              class="relative flex flex-wrap gap2"
              v-if="task.assigneeUser || task.ownerUser"
            >
              <!-- 信息：头像昵称 -->
              <div
                class="bg-gray-100 h-[35px] rounded-3xl flex items-center pr-[8px] dark:color-gray-600 position-relative"
              >
                <template v-if="task.assigneeUser?.avatar || task.assigneeUser?.nickName">
                  <el-avatar
                    class="!m-[5px]"
                    :size="28"
                    v-if="task.assigneeUser?.avatar"
                    :src="task.assigneeUser?.avatar"
                  />
                  <el-avatar class="!m-[5px]" :size="28" v-else>
                    {{ task.assigneeUser?.nickName.substring(0, 1) }}
                  </el-avatar>
                  {{ task.assigneeUser?.nickName }}
                </template>
                <template v-else-if="task.ownerUser?.avatar || task.ownerUser?.nickName">
                  <el-avatar
                    class="!m-5px"
                    :size="28"
                    v-if="task.ownerUser?.avatar"
                    :src="task.ownerUser?.avatar"
                  />
                  <el-avatar class="!m-5px" :size="28" v-else>
                    {{ task.ownerUser?.nickName.substring(0, 1) }}
                  </el-avatar>
                  {{ task.ownerUser?.nickName }}
                </template>
                <!-- 信息：任务 ICON -->
                <div
                   v-if="onlyStatusIconShow.includes(task.status)"
                  class="absolute top-[19px] left-[23px] rounded-full flex items-center p-[1px] border-2 border-white border-solid"
                  :style="{ backgroundColor: statusIconMap2[task.status]?.color }"
                >
                  <el-icon :size="11" color="#FFFFFF" >
                     <component :is="statusIconMap[task.status]?.icon" />
                  </el-icon>
                </div>
              </div>
            </div>
            <div>
              <div
                v-if="
                  task.reason &&
                  [NodeType.USER_TASK_NODE, NodeType.END_EVENT_NODE].includes(activity.nodeType)&&activity.name!='结束'
                "
                class="text-[#a5a5a5] text-[13px] mt-1 w-full bg-[#f8f8fa] p2 rounded-md"
              >
                审批意见：{{ task.reason }}
              </div>
            </div>
          </div>
          <!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
          <div
            v-for="(user, idx1) in activity.candidateUsers"
            :key="idx1"
            class="bg-gray-100 h-[35px] rounded-3xl flex items-center pr-[8px] dark:color-gray-600 relative"
          >
            <el-avatar class="!m-[5px]" :size="28" v-if="user.avatar" :src="user.avatar" />
            <el-avatar class="!m-[5px]" :size="28" v-else>
              {{ user.nickName.substring(0, 1) }}
            </el-avatar>
            {{ user.nickName }}
            <!-- 信息：任务 ICON -->
            <div
             
              class="absolute top-[20px] left-[24px] rounded-full flex items-center p-[1px] border-2 border-white border-solid"
              :style="{ backgroundColor: statusIconMap['-1']?.color }"
            >  
              
              <el-icon :size="11" color="#fff">
              <component :is="getApprovalNodeIcon(activity.status, activity.nodeType)" />
            </el-icon>
           
            </div>
          </div>
        </div>
      </template>
      <div v-if="index < activityNodes.length - 1" class="timeline-connector"></div>
    </el-step>
  </el-steps>
   </div>
  <!-- 用户选择弹窗 -->
 </div>
</template>

<script  setup>
import { formatDate } from '@/utils/formatTime'
import { Check, Close, Loading, Clock, Minus, Delete } from '@element-plus/icons-vue'
import starterSvg from '@/assets/svgs/bpm/starter.svg'
import auditorSvg from '@/assets/svgs/bpm/auditor.svg'
import copySvg from '@/assets/svgs/bpm/copy.svg'
import conditionSvg from '@/assets/svgs/bpm/condition.svg'
import parallelSvg from '@/assets/svgs/bpm/parallel.svg'
import finishSvg from '@/assets/svgs/bpm/finish.svg'

defineOptions({ name: 'BpmProcessInstanceStep' })

const  props= defineProps({
    activityNodes: Array, // 审批节点信息
     showStatusIcon: {
      type:Boolean,
      default:true
     } // 默认值为 true
  })
// 审批节点
const statusIconMap2 = {
  // 未开始
  '-1': { color: '#909398', icon: 'ep-clock' },
  // 待审批
  '0': { color: '#00b32a', icon: 'ep:loading' },
  // 审批中
  '1': { color: '#448ef7', icon: 'ep:loading' },
  // 审批通过
  '2': { color: '#00b32a', icon: 'ep:circle-check-filled' },
  // 审批不通过
  '3': { color: '#f46b6c', icon: 'fa-solid:times-circle' },
  // 取消
  '4': { color: '#cccccc', icon: 'ep:delete-filled' },
  // 退回
  '5': { color: '#f46b6c', icon: 'ep:remove-filled' },
  // 委派中
  '6': { color: '#448ef7', icon: 'ep:loading' },
  // 审批通过中
  '7': { color: '#00b32a', icon: 'ep:circle-check-filled' }
}
const CandidateStrategy= {
  /**
   * 指定角色
   */
  ROLE : 10,
  /**
   * 部门成员
   */
  DEPT_MEMBER : 20,
  /**
   * 部门的负责人
   */
  DEPT_LEADER : 21,
  /**
   * 连续多级部门的负责人
   */
  MULTI_LEVEL_DEPT_LEADER : 23,
  /**
   * 指定岗位
   */
  POST : 22,
  /**
   * 指定用户
   */
  USER : 30,
  /**
   * 发起人自选
   */
  START_USER_SELECT : 35,
  /**
   * 发起人自己
   */
  START_USER : 36,
  /**
   * 发起人部门负责人
   */
  START_USER_DEPT_LEADER : 37,
  /**
   * 发起人连续多级部门的负责人
   */
  START_USER_MULTI_LEVEL_DEPT_LEADER : 38,
  /**
   * 指定用户组
   */
  USER_GROUP : 40,
  /**
   * 表单内用户字段
   */
  FORM_USER : 50,
  /**
   * 表单内部门负责人
   */
  FORM_DEPT_LEADER : 51,
  /**
   * 流程表达式
   */
  EXPRESSION : 60
}
const NodeType = {
/**
   * 结束节点
   */
  END_EVENT_NODE :1,
  /**
   * 发起人节点
   */
  START_USER_NODE : 10,
  /**
   * 审批人节点
   */
  USER_TASK_NODE :11,

  /**
   * 抄送人节点
   */
  COPY_TASK_NODE : 12,

  /**
   * 延迟器节点
   */
  DELAY_TIMER_NODE : 14,

  /**
   * 条件节点
   */
  CONDITION_NODE : 50,
  /**
   * 条件分支节点 (对应排他网关)
   */
  CONDITION_BRANCH_NODE : 51,
  /**
   * 并行分支节点 (对应并行网关)
   */
  PARALLEL_BRANCH_NODE : 52,

  /**
   * 包容分支节点 (对应包容网关)
   */
  INCLUSIVE_BRANCH_NODE : 53
}
const TaskStatusEnum= {
  /**
   * 未开始
   */
  NOT_START : -1,

  /**
   * 待审批
   */
  WAIT :  0,
  /**
   * 审批中
   */
  RUNNING :  1,
  /**
   * 审批通过
   */
  APPROVE : 2,

  /**
   * 审批不通过
   */
  REJECT :3,

  /**
   * 已取消
   */
  CANCEL : 4,
  /**
   * 已退回
   */
  RETURN : 5,
  /**
   * 审批通过中
   */
  APPROVING : 7
}
const stepstatus={
   '2':'success',
   '3':'error',
   '0':'wait'
}
const statusIconMap = {
  // 审批未开始
  '-1': { color: '#909398', icon: Clock },
  '0': { color: '#00b32a', icon: Clock },
  // 审批中
  '1': { color: '#448ef7', icon: Loading },
  // 审批通过
  '2': { color: '#00b32a', icon: Check },
  // 审批不通过
  '3': { color: '#f46b6c', icon: Close },
  // 已取消
  '4': { color: '#cccccc', icon: Delete },
  // 退回
  '5': { color: '#f46b6c', icon: Minus },
  // 委派中
  '6': { color: '#448ef7', icon: Loading },
  // 审批通过中
  '7': { color: '#00b32a', icon: Check }
}

const nodeTypeSvgMap = {
  // 结束节点
  [NodeType.END_EVENT_NODE]: { color: '#909398', svg: finishSvg },
  // 发起人节点
  [NodeType.START_USER_NODE]: { color: '#909398', svg: starterSvg },
  // 审批人节点
  [NodeType.USER_TASK_NODE]: { color: '#ff943e', svg: auditorSvg },
  // 抄送人节点
  [NodeType.COPY_TASK_NODE]: { color: '#3296fb', svg: copySvg },
  // 条件分支节点
  [NodeType.CONDITION_NODE]: { color: '#14bb83', svg: conditionSvg },
  // 并行分支节点
  [NodeType.PARALLEL_BRANCH_NODE]: { color: '#14bb83', svg: parallelSvg }
}

// 只有只有状态是 -1、0、1 才展示头像右小角状态小icon
const onlyStatusIconShow = [-1, 0, 1]

// timeline时间线上icon图标
const getApprovalNodeImg = (nodeType) => {
  return nodeTypeSvgMap[nodeType]?.svg
}
const getsetpstatus=(taskStatus)=>{

  return stepstatus[taskStatus]
 

}
const getApprovalNodeIcon = (taskStatus, nodeType) => {
  
  if (taskStatus == TaskStatusEnum.NOT_START) {
    return statusIconMap[taskStatus]?.icon
  }

  if (
    nodeType === NodeType.START_USER_NODE ||
    nodeType === NodeType.USER_TASK_NODE ||
    nodeType === NodeType.END_EVENT_NODE
  ) {
    return statusIconMap[taskStatus]?.icon
  }
}

const getApprovalNodeColor = (taskStatus) => {
  return statusIconMap[taskStatus]?.color
}

const getApprovalNodeTime = (node) => {
  if (node.nodeType === NodeType.START_USER_NODE && node.startTime) {
    return `${formatDate(node.startTime)}`
  }
  if (node.endTime) {
    return `${formatDate(node.endTime)}`
  }
  if (node.startTime) {
    return `${formatDate(node.startTime)}`
  }
}

// 选择自定义审批人
const userSelectFormRef = ref()
const handleSelectUser = (activityId, selectedList) => {
  userSelectFormRef.value.open(activityId, selectedList)
}

const customApproveUsers= ref({}) // key：activityId，value：用户列表
// 选择完成
const handleUserSelectConfirm = (activityId, userList) => {
  customApproveUsers.value[activityId] = userList || []
  emit('selectUserConfirm', activityId, userList)
}


 const isEmpty = (val)=> {
  if (val === null || val === undefined || typeof val === 'undefined') {
    return true
  }
  if (isArray(val) || isString(val)) {
    return val.length === 0
  }

  if (val instanceof Map || val instanceof Set) {
    return val.size === 0
  }

  if (isObject(val)) {
    return Object.keys(val).length === 0
  }

  return false
}
   const isArray = (val) => {
  return val && Array.isArray(val)
}
</script>


<style scoped>
.processBox{
  text-align: justify;
}
</style>